/*   
Theme Name: Monodon Shrimp
Theme URI: -
Description: Custom Theme for monodon by picodio
Author: Yohanes Raymond
Author URI: http://mvweb.comyr.com/portfolio
*/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*general*/
.fr{ float: right; }
.fl{ float: left; }
.center{ margin: 0 auto; }
.text-center{ text-align: center; }
.clickable{ cursor: pointer; }
.hidden{ display: none; }
.shadowed{ -webkit-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.5); box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.5); }
.full{ width: 100%; }
.bg-white{ background-color: #fff !important; }
.bg-blue{ background-color: #ebf8fe !important; }

.box{ background-color: #fff; margin-top: 20px; }
.rounded-equal{ -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; }
.rounded{ -moz-border-radius-topleft: 7px; -moz-border-radius-topright: 7px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; -webkit-border-radius: 7px 7px 0px 0px; border-radius: 7px 7px 0px 0px; }

#crumbs{ margin-top: 25px; float: left; width: 100%; text-align: left; }
#crumbs a{ color: #0099dd; text-decoration: underline; }

/*layout*/
@font-face {
	font-family: 'gillsans';
	src: url('fonts/gillsans.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

body{ font-family: 'gillsans'; text-align: left; color: #084b68; }
a{ font-family: 'gillsans'; text-decoration: none; color: #084b68; }
a:hover{ color: #0A9 !important; }
p{ line-height: 17px; }
h2{ font-size: 43px; font-weight: bold; margin-bottom: 10px; }
h3{ font-size: 24px; font-weight: bold; }
h4{ font-size: 14px; font-weight: bold; }
h5{ font-size: 12px; font-weight: bold; }

.wrapper{ width: 980px; margin: 0 auto; position: relative; }

.search{ position: absolute; right: 0px; top: 0px; }
.search input[type="image"]{ position: relative; top: 3px; }
.search input[type="text"]{ border: 1px solid #48c7ff; }

.header{ text-align: center; margin-top: 20px; background: url('images/bg-sea.png') repeat-x; background-position: 0px 160px; z-index: 100; }
.header, .content, .footer{ float: left; width: 100%; position: relative; }

.footer{ margin-bottom: 50px; }
.footer .wrapper{ border-top: 1px solid #b1e5f9; padding-top: 30px; margin-top: 30px; }
.footer .logos{ text-align: center; margin-bottom: 20px; }
.footer .logos img{ margin-right: 50px; }

/*header menu*/
.header .wrapper{ background: url('images/img-buoy.png') no-repeat 0px 145px; height: 170px; }
.header .menu-main-menu-container{ float: left; width: 100%; margin-bottom: 10px; }
.header .menu-main-menu-container > ul{ margin: 0 auto; width: 500px; }
.header .menu-main-menu-container > ul > li{ float: left; padding-left: 20px; height: 45px; position: relative; padding-top: 20px; }
.header .menu-main-menu-container > ul > li a{ color: #0099dd; font-size: 16px; position: relative; z-index: 100; }

.header .menu-main-menu-container ul.sub-menu{ display: none; position: absolute; height: 222px; top: 0px; z-index: 10; width: 170px; }
.header .menu-main-menu-container ul li ul.sub-menu li{ width: 135px; position: relative; top: 100px; left: 20px; margin-bottom: 10px; -webkit-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.2); box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.2); }
.header .menu-main-menu-container ul li ul.sub-menu li a {display: block; padding: 10px 25px; color: #084b68; font-size: 14px; background: rgba(255,255,255,0.8) }

//.header .menu-main-menu-container > ul > li:hover:nth-child(3) ul.sub-menu, .menu-main-menu-container ul li.current-menu-item:nth-child(3) > ul, .menu-main-menu-container ul li.current-menu-parent ul, .menu-main-menu-container ul li.current-post-ancestor ul{ display: block !important; }
//.menu-main-menu-container ul li.current-menu-parent ul, .menu-main-menu-container ul li.current-post-ancestor ul{ display: block !important; }

.header .menu-main-menu-container > ul > li:hover:nth-child(1), .menu-main-menu-container > ul > li.current-menu-item:nth-child(1) { background: url('images/bg-boathover.png') no-repeat; background-position: 0px 12px; }
.header .menu-main-menu-container > ul > li:hover:nth-child(2), .menu-main-menu-container > ul > li.current-menu-item:nth-child(2) { background: url('images/bg-boathover.png') no-repeat; background-position: -59px 12px; }
//.header .menu-main-menu-container > ul > li:hover:nth-child(3) > ul, .menu-main-menu-container > ul > li.current-menu-item:nth-child(3) > ul, .menu-main-menu-container ul li.current-menu-parent > ul, .menu-main-menu-container ul li.current-post-ancestor > ul{ background: url('images/bg-boathover.png') no-repeat; background-position: -147px 12px; }
.header .menu-main-menu-container > ul > li:hover:nth-child(3), .menu-main-menu-container > ul > li.current-menu-item:nth-child(3), .menu-main-menu-container ul li.current-menu-parent, .menu-main-menu-container ul li.current-post-ancestor{ background: url('images/bg-boathover.png') no-repeat; background-position: -147px 12px; }
.header .menu-main-menu-container > ul > li:hover:nth-child(4), .menu-main-menu-container > ul > li.current-menu-item:nth-child(4) { background: url('images/bg-boathover.png') no-repeat; background-position: -74px 12px; }
.header .menu-main-menu-container > ul > li:hover:nth-child(5), .menu-main-menu-container > ul > li.current-menu-item:nth-child(5) { background: url('images/bg-boathover.png') no-repeat; background-position: -304px 12px; }

/*header sail*/
.header .menu-main-menu-container > ul > li:hover:nth-child(3) > ul{ background: url(images/img-sail.png) no-repeat; background-position: 0px 65px; }

/*footer menu*/
.footer .menu-main-menu-container > ul > li:nth-child(1){ padding-left: 0px; }
.footer .menu-main-menu-container > ul > li{ border-right: 1px solid #50ceff; padding: 0px 5px; float: left; }
.footer .menu-main-menu-container > ul > li:nth-last-child(1){ border-right: none; padding-right: 0px; }
.footer .menu-main-menu-container > ul > li a{ color: #50ceff; font-size: 14px; float: left; }
.footer .menu-main-menu-container .menu{ width: 390px; margin: 0 auto; }

.footer p{ float: left; margin: 5px auto; text-align: center; width: 100%; font-size: 12px; }

.content .content-top{ background: #e9f9ff; text-align: center; float: left; width: 100%; }
.content .content-bottom{ background: #fff; }
.content .content-top{ padding-top: 20px; }

/*slideshow*/
#slideshow{ position: relative; overflow: hidden; width:100%; margin: 0 auto; margin-top: 20px; height: 315px; }
#slideshow .frame{ float: left; display: none; }
#slideshow .description{ width: 310px; margin: 30px 40px; float: left; text-align: left; }
#slideshow .description h2{ margin-bottom: 25px; }
#slideshow .description p{ line-height: 17px; }
#slideshow .description a{ width:130px; color: #fff; font-size: 14px; background: url('images/btn-more-details.png') no-repeat; padding: 10px 15px; float: left; margin-top: 25px; }
#slideshow .image{ width: 100%; overflow: hidden; height: 315px; position: absolute; right: 0px; }
#slideshow .image img{ float: right; }

/*sidebar*/
.content-sidebar{ width: 185px; float: left; margin-top: 20px; margin-right: 90px;  }
.content-sidebar .date .field{ display: none; }
.content-sidebar h3{ display: block; background: url('images/bg-sea.png') repeat-x; padding-bottom: 20px; margin-bottom: 10px; background-position: 0px 37px; }
.content-sidebar h4{ margin-bottom: 15px; line-height: 17px; cursor: pointer; }
.content-sidebar .date h4{ color: #9ea8b0; }
.content-sidebar .date h4.active{ color: #084b68; }
//.content-sidebar .date div.active .field .post{ display: block; }

.content-sidebar p{ color: #7b848e; font-size: 12px; line-height: 17px; }
.content-sidebar a{ color: #ff676e; font-size: 12px; }
.content-sidebar .post{ margin: 0px 25px 20px 25px; }

/*index*/
.content-top .intro-title p.description{ width: 575px; margin:0 auto; }

.content-bottom .first-col{ float: left; padding: 0px 15px; margin: 30px auto; border-right: 1px solid #e9a43a; height: 100px; }
.content-bottom .first-col:nth-child(3){ border-right: none;  }
.content-bottom .first-col .icon{ width: 90px; height: 90px; float: left; background: url('images/icon-home.png') no-repeat; margin: auto 15px; }

.content-bottom .first-col:nth-child(1) .icon{ background-position: 0px 0px; }
.content-bottom .first-col:nth-child(2) .icon{ background-position: -95px 0px; }
.content-bottom .first-col:nth-child(3) .icon{ background-position: -185px 0px; }

.content-bottom .first-col h3{ width: 175px; float: left; margin-bottom: 10px; }
.content-bottom .first-col a{ font-size: 12px; color: #a26200; float: right; margin-top: 10px; text-decoration: underline; }

.content-bottom .second-col{ float: left; width: 230px; margin-right: 75px; padding-left: 20px; }
.content-bottom .second-col h3{ position: relative; top: 10px; }
.content-bottom .second-col .head{ height: 36px; margin-bottom: 20px;}
.content-bottom .second-col .icon{ background: url('images/icon-home2.png') no-repeat; width: 25px; height: 36px; float: left; margin: 0px 10px 0px 0px; }
.content-bottom .second-col:nth-child(4) .icon{ background-position: 0px 0px; }
.content-bottom .second-col:nth-child(5) .icon{ background-position: -23px 0px; }
.content-bottom .second-col:nth-child(6) .icon{ background-position: -60px 0px; }

.content-bottom .second-col ul li{ margin-bottom: 10px; }
.content-bottom .second-col p{ font-size: 12px; color: #858585; line-height: 17px; margin-bottom: 20px; }
.content-bottom .second-col > a{ font-size: 12px; color: #a26200; float: right; margin-top: 10px; text-decoration: underline;  }

/*about us*/
.tab-wrapper{ margin-top: 20px; padding: 60px; background: url('images/bg-sea.png') repeat-x; float: left; background-position: 0px 100%; }
.tab-wrapper .tab-menu{ float: left; width: 100%; }
.tab-wrapper .tab-menu ul li{ background: #cdf1ff; padding: 5px; min-width: 170px; text-align: center; cursor: pointer; float: left; -moz-border-radius-topleft: 10px;-moz-border-radius-topright: 10px;-moz-border-radius-bottomright: 0px;-moz-border-radius-bottomleft: 0px;-webkit-border-radius: 10px 10px 0px 0px;border-radius: 10px 10px 0px 0px; -webkit-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.3); -moz-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.3); box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.3); }
.tab-wrapper .tab-menu ul li:hover{ color: #0A9 !important;  }
.tab-wrapper .tab-menu ul li.active{ background: #fff; }

.tab-wrapper .tab-content{ background: #fff; float:left; padding: 45px 30px; }
.tab-wrapper .tab-content .tab{ display: none; }
.tab-wrapper .tab-content .tab:nth-child(1){ display: block; }
.tab-wrapper .tab-content h3{ margin-bottom: 25px; }
.tab-wrapper .tab-content p{ color: #858585; font-size: 12px; float: left; width: 460px; }

.tab-wrapper .tab-image{ margin-right: 40px; width: 300px; float: left; }
.tab-wrapper .tab-image .featured{ padding: 20px; max-width: 250px; max-height: 250px; overflow: hidden; margin-bottom: 10px; border: 1px solid #f5f5f5; }
.tab-wrapper .tab-image .featured img{ max-width: 250px; }
.tab-wrapper .tab-image .thumbnails{ width: 100%; }
.tab-wrapper .tab-image .thumbnails .thumb{ float: left; margin-bottom: 10px; margin-right: 10px; padding: 5px; max-width: 75px; max-height: 75px; overflow: hidden; border: 1px solid #f5f5f5; }
.tab-wrapper .tab-image .thumbnails .thumb img{ max-width: 75px; }

/*contact us*/
#map{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; width: 425px; height: 210px; border: 1px solid #d8e5e9; margin-bottom: 25px; margin-top: 10px; margin-right: 20px; }
#location{ padding: 25px 45px; float: left; margin-top: 10px; width: 440px; text-align: left;}
#location h3{ margin-bottom: 30px; }
#location p{ margin-bottom: 10px; }
#location span{ margin-top: 40px; }

#contact{ float: left; width: 100%; }
#contact-title{ text-align: center; margin: 30px auto; width: 600px; }
#contact-title h3{ margin-bottom: 20px; }
#contact-title p{ color: #858585; font-size: 12px; line-height: 15px; }

#contact-form{ width: 400px; }
#contact-form h4{ margin-bottom: 25px; }
#contact-form label{ float: left; width: 70px; font-size: 12px; color: #7b848e; }
#contact-form input[type="text"], #contact-form textarea{ border: none; background: #ebf8fe; width: 300px; }
#contact-form textarea{ height: 175px; }

#contact-form input[type="submit"]{ cursor:pointer; border: none; background-size: 100% 100%; font-weight: bold; color: white; font-size: 14px; background: url('images/btn-more-details.png') no-repeat; padding: 10px 15px; float: right; margin-top: 25px; }

#custom-contact-forms-errors{ border: 1px solid #FA5858; background: #F6CECE; color: #DF0101; }
#custom-contact-forms-errors a{ font-size: 14px; }
#custom-contact-forms-errors p{ padding: 10px; font-size: 16px; font-weight: bold; }
#custom-contact-forms-errors ul{ border-top: 1px solid #FA5858; }
#custom-contact-forms-errors ul li{ padding: 5px; margin-left: 5px; font-size: 14px; }

.customcontactform > div{ float: left;}
.customcontactform > div > label:nth-child(3){ float: left; width: 100% !important; margin-left: 70px; margin-bottom: 5px; color: #DF0101 !important; }

/*news*/
.news-content{ float: left; width: 700px; }
.news-content h4{ float: right; width: 100%; text-align: right; margin-bottom: 30px; }
.news-content h3{ margin-bottom: 15px; float: left; text-transform: uppercase; width: 525px; }
.news-content p{ float: left; color: #858585; width: 525px; }
.news-content .picture-frame{ width: 525px; height: 315px; overflow: hidden; margin-bottom: 15px; }
.news-content .news-big-content{ margin-bottom: 60px; float: left; text-align: center; }

/*news-detail*/
.news-detail .news-content h4{ text-align: left; margin-top: 55px; }
.news-detail .news-content h3{ text-align: left; width: 100%; margin-bottom: 40px; }
.news-detail .news-content .picture-frame{ float: right; width: 410px; height: 245px; margin-left: 20px; margin-bottom: 20px; }
.news-detail .news-content p{ float: none; text-align: left; width: 100%; }
.news-detail #crumbs{ margin-top: 25px !important; margin-bottom: 0px !important; }

/*products*/
.products{ float: left; margin:30px 0px; padding-bottom: 90px; border-bottom: 1px solid #b1e5f9; }
.products:nth-last-child(1){ border: none; }
.products h3{ text-transform: uppercase; margin-bottom: 30px; }
.products .picture{ float: left; width: 400px; height: 265px; overflow: hidden; margin-right: 20px; }
.products .description{ float: left; width: 535px; }
.products .description p{ margin-bottom: 20px; color: #858585; }
.products .description a{ float: left; width: 100%; margin-top: 10px; text-align: right; color: #ff0000; text-decoration: underline; }

/*image slideshow*/
.slide .products{ border-bottom: none !important; padding-bottom: 0px !important; margin-bottom: 0px; }
#image-slideshow{ width: 960px; overflow: hidden; }
#image-slideshow .page{ float: left; width: 960px; position: relative; }
#image-slideshow .img{ position: relative; width: 160px; height: 100px; overflow: hidden; padding: 10px; margin-right: 10px; margin-bottom: 10px; border: 1px solid #eeeeee; float: left; }
#image-slideshow .img img{ max-width: 160px; max-height: 100px; }
#image-slideshow .image-frame{ width: 960px; height: 386px; overflow: hidden; position: relative; }

#image-slideshow .pagination{ margin: 30px 0px; width: 100%; float: left; }
#image-slideshow .pagination ul{ margin: 0 auto; }
#image-slideshow .pagination ul li{ background: url('images/bg-slide.png') no-repeat; margin-right: 5px; width: 15px; height: 15px; cursor: pointer; float: left; background-position: -16px 0px; }
#image-slideshow .pagination ul li.active{ background-position: 0px 0px; }

/*product detail*/
.single #crumbs{ margin-top: 0px; margin-bottom: 25px; }
.single-info{ float: left; padding: 40px 50px; margin-bottom: 40px; width: 860px; text-align: left; }
.single-info h3{ font-size: 30px; margin-bottom: 40px; }
.single-info h4{ font-size: 28px; margin-bottom: 20px; }

.single-info .picture-frame{ width: 385px; height: 235px; overflow: hidden; float: left; margin-right: 30px; }
.single-info .product-content{ float: left; width: 445px; }
.single-info .product-content ul li{ display: block; cursor: pointer; font-size: 16px; color: #11a0df; float: left; padding-right: 10px; margin-right: 10px; margin-bottom: 30px; border-right: 1px solid #11a0df; }
.single-info .product-content ul li p{ font-size: 16px; color: #11a0df; }
.single-info .product-content ul li:nth-last-child(1){ margin-right: 0px; padding-right: 10px; border: none; }
.single-info .product-content ul li:hover p, .single-info .product-content ul li.active p{ border-bottom: 3px solid #b2e6fa; color: #084b68; }
.single-info .product-content p{ float: left; width: 100%; color: #858585; font-size: 12px; }
.single-info .product-content p:nth-child(n+4){ display: none; }